<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { Button as AButton } from 'ant-design-vue'
import router from '@/router'
import { useStore } from 'vuex'

const store = useStore()

const stats = ref([
  { title: 'Total Users', value: 1254, icon: 'user-outlined', color: '#1890ff' },
  { title: 'Revenue', value: '$8,256', icon: 'dollar-outlined', color: '#52c41a' },
  { title: 'Tasks', value: 32, icon: 'check-circle-outlined', color: '#faad14' },
  { title: 'Pending Issues', value: 5, icon: 'warning-outlined', color: '#ff4d4f' }
])

const recentActivity = ref([
  { action: 'User Login', user: 'John Doe', time: '5 minutes ago' },
  { action: 'New Order', user: 'Jane Smith', time: '10 minutes ago' },
  { action: 'Server Update', user: 'System', time: '1 hour ago' },
  { action: 'Payment Received', user: 'Acme Corp', time: '2 hours ago' }
])

const receivedMessage = ref('')

// 使用Vuex中的路由信息
const routes = computed(() => {
  return store.getters['route/getRoutes']
})

// 系统状态信息
const routeStatus = computed(() => {
  return {
    loaded: store.getters['route/isRoutesLoaded'],
    loading: store.getters['route/isLoadingRoutes'],
    error: store.getters['route/getLoadError']
  }
})

// 测试向主应用发送消息
const testCommunication = () => {
  if (window.$wujie?.bus) {
    window.$wujie.bus.$emit('sub-app:message', {
      type: 'test',
      content: '来自子应用的测试消息',
      timestamp: new Date().toISOString()
    })
  }
}

// 监听主应用消息
const handleMainAppMessage = (data: any) => {
  receivedMessage.value = data.content
  // 3秒后清除消息
  setTimeout(() => {
    receivedMessage.value = ''
  }, 3000)
}

onMounted(() => {
  // 注册主应用消息监听
  window.$wujie?.bus.$on('main-app:message', handleMainAppMessage)
})

onUnmounted(() => {
  // 清理监听器
  window.$wujie?.bus.$off('main-app:message', handleMainAppMessage)
})
</script>

<template>
  <div class="dashboard-container">
    <h1>仪表盘</h1>
    <div class="routes-info">
      <h2>当前系统路由信息</h2>
      <div v-if="routeStatus.loading" class="loading-state">
        <p>正在加载路由配置...</p>
      </div>
      <div v-else-if="routeStatus.error" class="error-state">
        <p>路由加载失败: {{ routeStatus.error }}</p>
      </div>
      <div v-else class="routes-list">
        <div v-for="route in routes" :key="route.path" class="route-item">
          <div class="route-path">路径: {{ route.path }}</div>
          <div class="route-name">名称: {{ route.name }}</div>
          <div class="route-meta">
            <div>需要认证: {{ route.meta?.requiresAuth !== false ? '是' : '否' }}</div>
            <div v-if="route.meta?.title">标题: {{ route.meta.title }}</div>
            <div v-if="route.meta?.icon">图标: {{ route.meta.icon }}</div>
            <div v-if="route.meta?.permissions">
              权限: {{ route.meta.permissions.join(', ') }}
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 测试通信按钮 -->
    <a-button type="primary" @click="testCommunication">
      发送消息给主应用
    </a-button>
    <div v-if="receivedMessage" class="message-box">
      收到主应用消息: {{ receivedMessage }}
    </div>

    <a-row :gutter="16" style="margin-bottom: 24px">
      <a-col :span="6" v-for="(stat, index) in stats" :key="index">
        <a-card hoverable>
          <a-statistic :title="stat.title" :value="stat.value" :value-style="{ color: stat.color }" />
        </a-card>
      </a-col>
    </a-row>

    <a-row :gutter="16">
      <a-col :span="16">
        <a-card title="Recent Activity">
          <a-list item-layout="horizontal" :data-source="recentActivity">
            <template #renderItem="{ item }">
              <a-list-item>
                <a-list-item-meta :title="item.action" :description="item.time">
                  <template #avatar>
                    <a-avatar style="background-color: #87d068">{{ item.user.charAt(0) }}</a-avatar>
                  </template>
                </a-list-item-meta>
              </a-list-item>
            </template>
          </a-list>
        </a-card>
      </a-col>
      <a-col :span="8">
        <a-card title="Quick Actions">
          <a-button type="primary" block style="margin-bottom: 8px">Create Report</a-button>
          <a-button block style="margin-bottom: 8px">Invite Team Member</a-button>
          <a-button block>View All Analytics</a-button>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<style scoped>
.dashboard-container {
  padding: 20px;
}

.routes-info {
  margin-top: 30px;
  background-color: #f9f9f9;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.routes-list {
  margin-top: 15px;
}

.route-item {
  background-color: white;
  padding: 15px;
  margin-bottom: 10px;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.route-path {
  font-weight: bold;
  font-size: 16px;
  color: #3a8ee6;
}

.route-name, .route-meta {
  margin-top: 5px;
  color: #666;
}

.route-meta {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed #eee;
}

.loading-state, .error-state {
  padding: 20px;
  text-align: center;
  background-color: white;
  border-radius: 4px;
}

.loading-state {
  color: #1890ff;
}

.error-state {
  color: #ff4d4f;
}

.message-box {
  margin-top: 16px;
  padding: 12px;
  background-color: #f0f2f5;
  border-radius: 4px;
}
</style>